<template>
  <div :class="['j-select-employee', multi ? 'j-select-employee-multi' : '']">
    <a-select
      mode="multiple"
      showSearch
      v-model="selectedValue"
      :placeholder="placeholder"
      optionFilterProp="children"
      :disabled="disabled"
      @change="handleChange"
      :style="{ width: width }"
      :getPopupContainer="getPopupContainer"
    >
      <a-select-option v-for="(item,index) in employeeOptions" :key="index" :value="item[valueKey]">
        <span>{{ getEmployeeName(item) }}</span>
      </a-select-option>
    </a-select>
    <div v-show="isShowSelectItems && selectedValue && selectedValue.length>0" class="selected-items">
      <div v-for="(item,index) in selectedEmployees" :key="index" class="selected-item">
        <span>{{ getEmployeeName(item) }}</span>
        <a-icon type="close" @click="handleCancelSelect(item[valueKey])"/>
      </div>
    </div>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import { filterObj } from '@/utils/util'

  export default {
    name: "JSelectMultiEmployee",
    props: {
      placeholder: {
        type: String,
        default: '请选择',
        required: false
      },
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      value: {
        type: [String, Array],
        required: false
      },
      multi: {
        type: Boolean,
        default: true,
        required: false
      },
      width: {
        type: String,
        default: '100%',
        required: false
      },
      valueKey: {
        type: String,
        default: 'id',
        required: false
      },
      url: {
        type: String,
        default: '/sys/employee/list',
        required: false
      },
      params: {
        type: Object,
        default: () => ({}),
        required: false
      },
      isShowSelectItems: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data() {
      return {
        loading: false,
        selectedValue: [],
        employeeOptions: [],
        selectedEmployees: []
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(val) {
          if (val) {
            this.initValue()
          } else {
            this.selectedValue = []
            this.selectedEmployees = []
          }
        }
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData(val) {
        let params = {}
        if(val) {
          params.empName = val
        }
        // 合并params
        params = Object.assign(params, this.params)
        // 过滤空值
        params = filterObj(params)
        this.loading = true
        getAction(this.url, params).then(res => {
          if (res.success) {
            this.employeeOptions = res.result.records || res.result
            // 初始化已选中数据
            this.initValue()
          }
        }).finally(() => {
          this.loading = false
        })
      },
      initValue() {
        if (!this.value || this.value.length === 0) {
          this.selectedValue = []
          this.selectedEmployees = []
          return
        }
        let values = []
        if (typeof this.value === 'string') {
          values = this.value.split(',')
        } else {
          values = this.value
        }
        this.selectedValue = values
        // 查找已选中的员工
        this.selectedEmployees = this.employeeOptions.filter(item => values.includes(item[this.valueKey]))
      },
      handleChange(selectedValues) {
        if (!selectedValues || selectedValues.length === 0) {
          this.$emit('change', [])
          this.$emit('input', [])
          return
        }
        // 查找已选中的员工
        this.selectedEmployees = this.employeeOptions.filter(item => selectedValues.includes(item[this.valueKey]))
        let values = this.selectedEmployees.map(item => item[this.valueKey])
        this.$emit('change', values)
        this.$emit('input', values)
      },
      getEmployeeName(item) {
        return item.empName || item.empNo || item.id
      },
      handleCancelSelect(value) {
        let index = this.selectedValue.indexOf(value)
        if (index !== -1) {
          this.selectedValue.splice(index, 1)
          this.handleChange(this.selectedValue)
        }
      },
      getPopupContainer(node) {
        return node.parentNode
      }
    }
  }
</script>

<style lang="less" scoped>
  .j-select-employee {
    position: relative;
    
    .selected-items {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      z-index: 1050;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      padding: 4px 0;
      margin-top: 4px;
      
      .selected-item {
        padding: 4px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        &:hover {
          background-color: #e6f7ff;
        }
        
        .anticon-close {
          cursor: pointer;
          color: #999;
          
          &:hover {
            color: #666;
          }
        }
      }
    }
  }
</style> 